<template>
  <Menu mode="horizontal" @click="change" v-model:selectedKeys="current">
    <Item key="home">
      <router-link to="/">首页</router-link>
    </Item>
    <Item key="test">
      <router-link to="test">实验性</router-link>
    </Item>
  </Menu>
</template>
<script lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { Menu } from "ant-design-vue";

const { Item } = Menu;

const MENULISTS = ["home", "test"];

export default {
  components: {
    Menu,
    Item,
  },

  setup() {
    const current = ref([MENULISTS[0]]);

    // 获取当前路由
    const route = useRoute();
    const { fullPath } = route;
    // 匹配路径
    MENULISTS.forEach((item) => {
      if (fullPath.indexOf(item) !== -1) {
        current.value = [item];
      }
    });

    // 点击修改
    const change = (e: any) => {
      current.value = [e.key];
    };

    return {
      current,
      change,
    };
  },
};
</script>

<style lang="less">
.ant-menu-horizontal {
  display: inline-block;
  border-bottom: none;
  line-height: inherit;
  height: @header_height - 2px;

  .ant-menu-item {
    vertical-align: top;
    height: @header_height;
    box-sizing: border-box;
    border-width: 0;
    &.ant-menu-item-selected {
      border-width: 2px;
    }
  }
}
</style>